<template>
  <div class="docker">
    <div v-for="(item,index) in dockerList" :key="item.icon"
         :class="{item:true,'item-active':index===0}">
      <router-link :to="item.router">
        <em class="iconfont" v-html="item.icon"></em>
        <span class="text">{{ item.text }}</span>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dock',
  setup () {
    return {
      dockerList: [
        {
          icon: '&#xe7d8;',
          text: '首页',
          router: { name: 'Home' }
        },
        {
          icon: '&#xe603;',
          text: '购物车',
          router: { name: 'Carts' }
        },
        {
          icon: '&#xe65d;',
          text: '订单',
          router: { name: 'Home' }
        },
        {
          icon: '&#xe659;',
          text: '我的',
          router: { name: 'Home' }
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/variables.scss";
@import "../../style/mixins.scss";

.docker {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: .01rem solid $content-bg-color;
  z-index: 1000;

  display: flex;
  align-items: center;
  vertical-align: center;
  text-align: center;
  padding: 0 .18rem;
  box-sizing: border-box;
  color: $content-fontcolor;

  .item {
    flex: 1;
    a {
      display: flex;
      font-size: 0.12rem;
      flex-direction: column;
      align-items: center;
      vertical-align: center;
      color: $content-fontcolor;

      .iconfont {
        font-size: .22rem;
        margin: .07rem 0 .02rem 0;
      }

      .text {
        margin-bottom: .06rem;
      }

    }
  }

  .item-active {
    a {
      color: #1FA4FC;
    }
  }

}

</style>
